<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="../assets/css/style.css" />
</head>

<body>
    <div id="app">
        <div class="container">
            <span id="message">{{ msg }}</span>
        </div>
        <div class="container">
            <div class="account-info">
                <span v-if="userName">{{ userName }} | <a href="#" @click="logout">注销</a></span>
            </div>
        </div>

        <div class="container">
            <div class="form-group">
                <label>电子邮箱</label>
                <input type="text" v-model="loginModel.userName" />
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="text" v-model="loginModel.password" />
            </div>
            <div class="form-group">
                <label></label>
                <button @click="login">登陆</button>
            </div>
        </div>

        <div class="container text-center">
                <div>
                    <button @click="callApi">api</button>
                </div>
            <div class="result">
        {{result|json}}
                </div>
            </div>
    </div>

    
</body>

<script src="../assets/js/vue.js"></script>
<script src="../assets/js/zepto.js"></script>
<script>
    var vue = new Vue(
        {

            el: "#app",
            data: {
                loginUrl: 'http://localhost:6688/token',
                logutUrl: 'http://localhost:6688/api/Account/Logout',
                apiUrl: 'http://localhost:6688/api/Values',
                loginModel: {
                    userName: '',
                    password: '',
                    grant_type: 'password'
                },
                msg: '',
                userName: '',
                result:''
            },
            methods: {
                login: function () {
                    var vm = this;
                    vm.msg = '';
                    $.ajax({
                        url: vm.loginUrl,
                        beforeSend: function (request) {
                            // request.setRequestHeader("Authorization", "Basic YWRtaW46MTEx");
                        },
                        type: 'post',
                        dataType: 'json',
                        data: vm.loginModel,
                        success: function (data) {
                            vm.msg = "登陆成功";
                            vm.userName = data.userName;
                            sessionStorage.setItem("accessToken", data.access_token);
                            sessionStorage.setItem("userName", vm.userName);
                        },
                        error: vm.requestError
                    });
                },
                requestError: function (xhr, errorType, error) {
                    this.msg = xhr.responseText;
                },
                logout: function () {
                    headers = {}
                    headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken');
                    var vm = this;
                    $.ajax({
                        url: vm.logutUrl,
                        type: 'post',
                        headers: headers,
                        dataType: 'json',
                        success: function () {
                            vm.msg = "ok";
                            vm.userName = ''
                            sessionStorage.removeItem('userName')
                            sessionStorage.removeItem('accessToken')
                        },
                        error: vm.requestError
                    });
                },
                getSessionStorage: function () {
                    return vm.userName;
                },
                callApi:function()
                {
                    var vm=this;
                    vm.msg='';
                    vm.result='';
                    headers={};
                    headers.Authorization='Bearer '+sessionStorage.getItem('accessToken');
                    $.ajax({
                        type:'get',
                        dataType:'json',
                        url:vm.apiUrl,
                        headers:headers,
                        success:function(data)
                        {
                            vm.result=data;
                        },error:vm.requestError
                    });
                }
            }
        }
    );

</script>

</html>